JavaScript kokybės infrastruktūra: išsamus diegimo vadovas

Nuolat kintančiame žiniatinklio kūrimo pasaulyje JavaScript išlieka kertine technologija. Projektams tampant vis sudėtingesniems, o komandoms vis labiau pasiskirsčiusioms po pasaulį, kodo kokybės užtikrinimas tampa svarbiausiu prioritetu. Gerai apibrėžta ir įdiegta JavaScript kokybės infrastruktūra nebėra prabanga, o būtinybė kuriant patikimas, prižiūrimas ir mastelį keičiančias programas. Šis išsamus vadovas pateikia žingsnis po žingsnio metodą, kaip sukurti tvirtą kokybės infrastruktūrą jūsų JavaScript projektams, pritaikytą tarptautinėms komandoms ir įvairioms kūrimo aplinkoms.

Kodėl verta investuoti į JavaScript kokybės infrastruktūrą?

Investavimas į tvirtą kokybės infrastruktūrą duoda daug naudos:

• Geresnis kodo nuoseklumas: Užtikrina nuoseklų kodavimo stilių visoje kodo bazėje, todėl kūrėjams lengviau jį suprasti ir prižiūrėti. Galvokite apie tai kaip apie universalios kalbos, kuria laisvai kalba visi komandos nariai, sukūrimą.
• Mažiau klaidų ir defektų: Nustato galimas klaidas ankstyvoje kūrimo stadijoje, neleidžiant joms pasiekti produkcinės aplinkos. Tai panašu į korektorių, kuris pagauna klaidas prieš publikuojant dokumentą.
• Didesnis produktyvumas: Automatizuoja pasikartojančias užduotis, tokias kaip formatavimas ir lintinimas, leisdama kūrėjams sutelkti dėmesį į sudėtingesnių problemų sprendimą. Įsivaizduokite automatizuotą surinkimo liniją, kuri optimizuoja gamybą.
• Geresnis bendradarbiavimas: Suteikia bendrą pagrindą kodo peržiūroms ir diskusijoms, mažina trintį ir gerina komandos bendradarbiavimą, ypač pasiskirsčiusiose komandose.
• Supaprastinta priežiūra: Palengvina kodo refaktorinimą ir atnaujinimą, mažina naujų defektų atsiradimo riziką. Gerai sutvarkytoje bibliotekoje lengviau naršyti ir ją prižiūrėti.
• Sumažėjusi techninė skola: Proaktyviai sprendžia galimas problemas, užkertant kelią techninės skolos kaupimuisi laikui bėgant. Ankstyva priežiūra apsaugo nuo brangių remontų ateityje.

Globalioms komandoms nauda dar didesnė. Standartizuotos kodavimo praktikos panaikina kultūrinius ir kalbinius skirtumus, skatindamos sklandesnį bendradarbiavimą ir dalijimąsi žiniomis. Įsivaizduokite komandą, apimančią Šiaurės Ameriką, Europą ir Aziją; bendra kokybės infrastruktūra užtikrina, kad visi būtų vieningi, nepriklausomai nuo jų buvimo vietos ar patirties.

Pagrindiniai JavaScript kokybės infrastruktūros komponentai

Išsamią JavaScript kokybės infrastruktūrą sudaro keli pagrindiniai komponentai, kurių kiekvienas atlieka lemiamą vaidmenį užtikrinant kodo kokybę:

1. Lintinimas: Kodo analizė dėl stilistinių klaidų, galimų defektų ir kodavimo standartų laikymosi.
2. Formatavimas: Automatinis kodo formatavimas siekiant užtikrinti nuoseklumą ir skaitomumą.
3. Testavimas: Testų rašymas ir vykdymas siekiant patikrinti kodo funkcionalumą.
4. Statinė analizė: Kodo analizė dėl galimų saugumo spragų ir našumo problemų jo nevykdant.
5. Nuolatinė integracija (CI): Kūrimo, testavimo ir diegimo proceso automatizavimas.

1. Lintinimas su ESLint

ESLint yra galingas ir labai konfigūruojamas JavaScript lintinimo įrankis. Jis analizuoja kodą dėl stilistinių klaidų, galimų defektų ir kodavimo standartų laikymosi. ESLint palaiko platų taisyklių ir įskiepių spektrą, leidžiantį jį pritaikyti pagal jūsų specifinius poreikius.

Diegimas ir konfigūravimas

Norėdami įdiegti ESLint, paleiskite šią komandą:

            npm install eslint --save-dev
            

              
                Copy
              
            
          

Toliau sukurkite ESLint konfigūracijos failą (.eslintrc.js, .eslintrc.yml arba .eslintrc.json) savo projekto pagrindiniame kataloge. Galite naudoti komandą eslint --init, kad sugeneruotumėte pagrindinį konfigūracijos failą.

            eslint --init
            

              
                Copy
              
            
          

Konfigūracijos faile nurodomos taisyklės, kurias ESLint taikys. Galite rinktis iš įvairių integruotų taisyklių arba naudoti trečiųjų šalių įskiepius, kad išplėstumėte ESLint funkcionalumą. Pavyzdžiui, galite naudoti eslint-plugin-react įskiepį, kad taikytumėte React specifinius kodavimo standartus. Daugelis organizacijų taip pat kuria bendrinamas ESLint konfigūracijas, kad užtikrintų nuoseklų stilių visuose projektuose. AirBnB, Google ir StandardJS yra populiarių konfigūracijų pavyzdžiai. Spręsdami, atsižvelkite į savo komandos dabartinį stilių ir galimus kompromisus.

Štai paprasto .eslintrc.js konfigūracijos failo pavyzdys:

            module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    'no-unused-vars': 'warn',
    'no-console': 'warn',
    'react/prop-types': 'off',
  },
};

            

              
                Copy
              
            
          

Ši konfigūracija išplečia rekomenduojamas ESLint taisykles, įjungia React palaikymą ir apibrėžia kelias pasirinktines taisykles. Taisyklė no-unused-vars įspės apie nenaudojamus kintamuosius, o taisyklė no-console įspės apie console.log sakinius. Taisyklė react/prop-types yra išjungta, nes ji dažnai naudojama su TypeScript, kuris tipų tikrinimą tvarko kitaip.

ESLint integravimas į jūsų darbo eigą

Galite integruoti ESLint į savo darbo eigą keliais būdais:

• Komandinė eilutė: Paleiskite ESLint iš komandinės eilutės naudodami komandą eslint.
• Redaktoriaus integracija: Įdiekite ESLint įskiepį savo kodo redaktoriui (pvz., VS Code, Sublime Text, Atom).
• Nuolatinė integracija: Integruokite ESLint į savo CI procesą, kad kodas būtų automatiškai lintinamas su kiekvienu „commit“.

Norėdami paleisti ESLint iš komandinės eilutės, naudokite šią komandą:

            eslint .
            

              
                Copy
              
            
          

Ši komanda atliks visų JavaScript failų lintinimą esamame kataloge ir jo subkataloguose.

2. Formatavimas su Prettier

Prettier yra nuomonę turintis kodo formatuotojas, kuris automatiškai formatuoja kodą, siekdamas užtikrinti nuoseklumą ir skaitomumą. Skirtingai nuo lintinimo įrankių, kurie orientuojasi į galimų klaidų nustatymą, Prettier koncentruojasi tik į kodo formatavimą.

Diegimas ir konfigūravimas

Norėdami įdiegti Prettier, paleiskite šią komandą:

            npm install prettier --save-dev
            

              
                Copy
              
            
          

Toliau sukurkite Prettier konfigūracijos failą (.prettierrc.js, .prettierrc.yml arba .prettierrc.json) savo projekto pagrindiniame kataloge. Galite naudoti numatytąją konfigūraciją arba pritaikyti ją pagal savo specifinius poreikius.

Štai paprasto .prettierrc.js konfigūracijos failo pavyzdys:

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
};

            

              
                Copy
              
            
          

Ši konfigūracija nurodo, kad Prettier turėtų naudoti viengubas kabutes, pridėti kablelius visų kelių eilučių struktūrų pabaigoje, vengti kabliataškių ir nustatyti maksimalų eilutės ilgį iki 120 simbolių.

Prettier integravimas į jūsų darbo eigą

Galite integruoti Prettier į savo darbo eigą keliais būdais:

• Komandinė eilutė: Paleiskite Prettier iš komandinės eilutės naudodami komandą prettier.
• Redaktoriaus integracija: Įdiekite Prettier įskiepį savo kodo redaktoriui.
• Git „Hooks“: Naudokite Git „hooks“, kad automatiškai formatuotumėte kodą prieš „commit“.
• Nuolatinė integracija: Integruokite Prettier į savo CI procesą, kad automatiškai formatuotumėte kodą su kiekvienu „commit“.

Norėdami paleisti Prettier iš komandinės eilutės, naudokite šią komandą:

            prettier --write .
            

              
                Copy
              
            
          

Ši komanda suformatuos visus failus esamame kataloge ir jo subkataloguose.

ESLint ir Prettier integravimas

ESLint ir Prettier gali būti naudojami kartu, siekiant sukurti išsamų kodo kokybės sprendimą. Tačiau svarbu juos teisingai sukonfigūruoti, kad būtų išvengta konfliktų. ESLint ir Prettier gali konfliktuoti, nes ESLint taip pat gali būti sukonfigūruotas tikrinti formatavimą.

Norėdami integruoti ESLint ir Prettier, turėsite įdiegti šiuos paketus:

            npm install eslint-config-prettier eslint-plugin-prettier --save-dev
            

              
                Copy
              
            
          

Paketas eslint-config-prettier išjungia visas ESLint taisykles, kurios konfliktuoja su Prettier. Paketas eslint-plugin-prettier leidžia paleisti Prettier kaip ESLint taisyklę.

Atnaujinkite savo .eslintrc.js konfigūracijos failą, kad įtrauktumėte šiuos paketus:

            module.exports = {
  // ...
  extends: [
    // ...
    'prettier',
    'plugin:prettier/recommended',
  ],
  plugins: [
    // ...
    'prettier',
  ],
  rules: {
    // ...
    'prettier/prettier': 'error',
  },
};

            

              
                Copy
              
            
          

Ši konfigūracija išplečia prettier konfigūraciją, įjungia eslint-plugin-prettier įskiepį ir sukonfigūruoja prettier/prettier taisyklę, kad visos formatavimo problemos būtų pranešamos kaip klaidos.

3. Testavimas su Jest, Mocha ir Chai

Testavimas yra kritiškai svarbus kodo kokybės užtikrinimo aspektas. JavaScript siūlo įvairias testavimo sistemas, kurių kiekviena turi savo privalumų ir trūkumų. Kai kurios populiariausios testavimo sistemos apima:

• Jest: „Facebook“ sukurta testavimo sistema, nereikalaujanti konfigūracijos. Jest yra žinoma dėl savo paprasto naudojimo, integruotų imitavimo (mocking) galimybių ir puikaus našumo.
• Mocha: Lanksti ir išplečiama testavimo sistema, palaikanti platų tvirtinimų (assertion) bibliotekų ir ataskaitų teikėjų spektrą.
• Chai: Tvirtinimų biblioteka, kurią galima naudoti su Mocha ar kitomis testavimo sistemomis. Chai suteikia įvairius tvirtinimo stilius, įskaitant BDD (elgsena pagrįstas kūrimas) ir TDD (testais pagrįstas kūrimas).

Tinkamos testavimo sistemos pasirinkimas priklauso nuo jūsų specifinių poreikių ir pageidavimų. Jest yra geras pasirinkimas projektams, kuriems reikalinga nulinės konfigūracijos sąranka ir integruotos imitavimo galimybės. Mocha ir Chai yra geras pasirinkimas projektams, kuriems reikia daugiau lankstumo ir pritaikymo galimybių.

Pavyzdys su Jest

Pademonstruokime, kaip naudoti Jest testavimui. Pirmiausia, įdiekite Jest:

            npm install jest --save-dev
            

              
                Copy
              
            
          

Tada sukurkite testo failą (pvz., sum.test.js) tame pačiame kataloge, kuriame yra kodas, kurį norite testuoti (pvz., sum.js).

Štai sum.js failo pavyzdys:

            function sum(a, b) {
  return a + b;
}

module.exports = sum;

            

              
                Copy
              
            
          

O štai sum.test.js failo pavyzdys:

            const sum = require('./sum');

describe('sum', () => {
  it('should add two numbers correctly', () => {
    expect(sum(1, 2)).toBe(3);
  });

  it('should handle negative numbers correctly', () => {
    expect(sum(-1, 2)).toBe(1);
  });
});

            

              
                Copy
              
            
          

Šis testo failas apibrėžia du testo atvejus funkcijai sum. Pirmasis testo atvejis patikrina, ar funkcija teisingai sudeda du teigiamus skaičius. Antrasis testo atvejis patikrina, ar funkcija teisingai apdoroja neigiamus skaičius.

Norėdami paleisti testus, pridėkite test scenarijų į savo package.json failą:

            {
  // ...
  "scripts": {
    "test": "jest"
  }
  // ...
}

            

              
                Copy
              
            
          

Tada paleiskite šią komandą:

            npm test
            

              
                Copy
              
            
          

Ši komanda paleis visus testo failus jūsų projekte.

4. Statinė analizė su TypeScript ir Flow

Statinė analizė apima kodo analizę dėl galimų klaidų ir pažeidžiamumų jo nevykdant. Tai gali padėti nustatyti problemas, kurias sunku aptikti tradiciniais testavimo metodais. Du populiarūs statinės analizės įrankiai JavaScript yra TypeScript ir Flow.

TypeScript

TypeScript yra JavaScript viršaibis, kuris prideda statinį tipizavimą į kalbą. TypeScript leidžia apibrėžti kintamųjų, funkcijų ir objektų tipus, o tai gali padėti išvengti su tipais susijusių klaidų vykdymo metu. TypeScript kompiliuojasi į paprastą JavaScript, todėl jį galima naudoti su bet kuria JavaScript vykdymo aplinka.

Flow

Flow yra „Facebook“ sukurtas statinis tipų tikrintuvas, skirtas JavaScript. Flow analizuoja kodą dėl su tipais susijusių klaidų ir teikia grįžtamąjį ryšį kūrėjams realiu laiku. Flow galima naudoti su esamu JavaScript kodu, todėl nereikia perrašyti visos kodo bazės, kad galėtumėte jį naudoti.

Pasirinkimas tarp TypeScript ir Flow priklauso nuo jūsų specifinių poreikių ir pageidavimų. TypeScript yra geras pasirinkimas projektams, kuriems reikalingas stiprus statinis tipizavimas ir labiau struktūrizuotas kūrimo procesas. Flow yra geras pasirinkimas projektams, kurie nori pridėti statinį tipizavimą prie esamo JavaScript kodo be didelių laiko ir pastangų investicijų.

Pavyzdys su TypeScript

Pademonstruokime, kaip naudoti TypeScript statinei analizei. Pirmiausia, įdiekite TypeScript:

            npm install typescript --save-dev
            

              
                Copy
              
            
          

Tada sukurkite TypeScript konfigūracijos failą (tsconfig.json) savo projekto pagrindiniame kataloge.

Štai paprasto tsconfig.json konfigūracijos failo pavyzdys:

            {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

            

              
                Copy
              
            
          

Ši konfigūracija nurodo, kad TypeScript turėtų kompiliuotis į ES5, naudoti CommonJS modulių sistemą, įjungti griežtą tipų tikrinimą ir užtikrinti nuoseklų raidžių dydį failų pavadinimuose.

Dabar galite pradėti rašyti TypeScript kodą. Pavyzdžiui, štai paprastas TypeScript failas (greeting.ts):

            function greeting(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greeting("World"));

            

              
                Copy
              
            
          

Šis failas apibrėžia funkciją pavadinimu greeting, kuri priima eilutės tipo argumentą (name) ir grąžina eilutę. Anotacija : string nurodo, kad funkcija turi grąžinti eilutę. Jei bandysite grąžinti kitokio tipo reikšmę, TypeScript praneš klaidą.

Norėdami sukompiliuoti TypeScript kodą, paleiskite šią komandą:

            npx tsc
            

              
                Copy
              
            
          

Ši komanda sukompiliuos visus TypeScript failus jūsų projekte ir sugeneruos atitinkamus JavaScript failus.

5. Nuolatinė integracija (CI) su GitHub Actions, GitLab CI ir Jenkins

Nuolatinė integracija (CI) yra kūrimo praktika, apimanti kūrimo, testavimo ir diegimo proceso automatizavimą. CI padeda nustatyti ir išspręsti problemas ankstyvoje kūrimo stadijoje, mažinant riziką įdiegti defektus į produkcinę aplinką. Yra keletas CI platformų, įskaitant:

• GitHub Actions: CI/CD platforma, integruota tiesiogiai į GitHub. GitHub Actions leidžia automatizuoti darbo eigą tiesiogiai jūsų GitHub saugykloje.
• GitLab CI: CI/CD platforma, integruota į GitLab. GitLab CI leidžia automatizuoti darbo eigą tiesiogiai jūsų GitLab saugykloje.
• Jenkins: Atvirojo kodo CI/CD serveris, kurį galima naudoti su įvairiomis versijų kontrolės sistemomis ir diegimo platformomis. Jenkins suteikia didelį lankstumą ir pritaikymo galimybes.

Tinkamos CI platformos pasirinkimas priklauso nuo jūsų specifinių poreikių ir pageidavimų. GitHub Actions ir GitLab CI yra geri pasirinkimai projektams, kurie talpinami atitinkamai GitHub arba GitLab. Jenkins yra geras pasirinkimas projektams, kuriems reikia daugiau lankstumo ir pritaikymo galimybių.

Pavyzdys su GitHub Actions

Pademonstruokime, kaip naudoti GitHub Actions CI procesui. Pirmiausia, sukurkite darbo eigos failą (pvz., .github/workflows/ci.yml) savo GitHub saugykloje.

Štai paprasto .github/workflows/ci.yml darbo eigos failo pavyzdys:

            name: CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js 16
      uses: actions/setup-node@v2
      with:
        node-version: '16.x'
    - name: Install dependencies
      run: npm install
    - name: Run ESLint
      run: npm run lint
    - name: Run Prettier
      run: npm run format
    - name: Run tests
      run: npm test

            

              
                Copy
              
            
          

Šis darbo eigos failas apibrėžia CI procesą, kuris bus paleidžiamas su kiekvienu „push“ į main šaką ir su kiekvienu „pull request“, nukreiptu į main šaką. Procesą sudaro šie žingsniai:

1. Kodo paėmimas (checkout).
2. Node.js nustatymas.
3. Priklausomybių diegimas.
4. ESLint paleidimas.
5. Prettier paleidimas.
6. Testų paleidimas.

Norėdami įjungti CI procesą, tiesiog įkelkite darbo eigos failą į savo GitHub saugyklą. GitHub Actions automatiškai aptiks darbo eigos failą ir paleis procesą su kiekvienu „push“ ir „pull request“.

Kodo peržiūra ir bendradarbiavimas

Nors automatizavimas suteikia pagrindą, žmogiškoji peržiūra ir bendradarbiavimas išlieka kritiškai svarbiomis kokybės infrastruktūros dalimis. Kodo peržiūros metu aptinkamos logikos klaidos, dizaino trūkumai ir galimos saugumo spragos, kurių automatiniai įrankiai gali nepastebėti. Skatinkite atvirą bendravimą ir konstruktyvų grįžtamąjį ryšį tarp komandos narių. Įrankiai, tokie kaip GitHub „pull requests“ ar GitLab „merge requests“, palengvina šį procesą. Būtinai pabrėžkite pagarbios ir objektyvios kritikos svarbą, sutelkiant dėmesį į kodo tobulinimą, o ne į kaltinimų priskyrimą.

Aspektai, į kuriuos reikia atsižvelgti dirbant su globalia komanda

Diegiant JavaScript kokybės infrastruktūrą globalioms komandoms, atsižvelkite į šiuos veiksnius:

• Laiko juostos: Suplanuokite automatines užduotis (pvz., CI kūrimo procesus) vykdyti ne piko valandomis skirtingose laiko juostose, kad išvengtumėte našumo problemų.
• Komunikacija: Sukurkite aiškius komunikacijos kanalus, skirtus aptarti kodo kokybės problemas ir geriausias praktikas. Vaizdo konferencijos ir bendrinama dokumentacija gali panaikinti geografinius atstumus.
• Kultūriniai skirtumai: Būkite atidūs kultūriniams skirtumams bendravimo stiliuose ir grįžtamojo ryšio teikimo ypatumams. Skatinkite įtrauktį ir pagarbą visose sąveikose.
• Įrankių prieinamumas: Užtikrinkite, kad visi komandos nariai turėtų prieigą prie reikiamų įrankių ir išteklių, nepriklausomai nuo jų buvimo vietos ar interneto ryšio. Apsvarstykite galimybę naudoti debesijos sprendimus, kad sumažintumėte vietines priklausomybes.
• Dokumentacija: Pateikite išsamią dokumentaciją lengvai verčiamais formatais apie kodavimo standartus ir kokybės infrastruktūrą, kad komandos nariai galėtų laikytis organizacijos geriausių praktikų.

Išvada

Tvirtos JavaScript kokybės infrastruktūros sukūrimas yra nuolatinis procesas, reikalaujantis nuolatinio tobulinimo ir prisitaikymo. Įgyvendindami šiame vadove aprašytus metodus ir įrankius, galite žymiai pagerinti savo JavaScript projektų kokybę, priežiūrą ir mastelio keitimo galimybes, skatindami produktyvesnę ir labiau bendradarbiaujančią aplinką savo globaliai komandai. Atminkite, kad konkretūs įrankiai ir konfigūracijos skirsis priklausomai nuo jūsų projekto poreikių ir komandos pageidavimų. Svarbiausia yra rasti jums tinkantį sprendimą ir nuolat jį tobulinti laikui bėgant.